<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部导航</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/reset.css">
    <script src="../../static/cloud/js/pages/contract/rem.js"></script>
    <script src="./js/jquery.js"></script>
</head>

<body>
    <div class="footer">
        <div class="footer-box flex aic">
            <div class="footer-i footer-i-active">
                <a href="javascript:;">
                    <img class="footer-i-img1" src="./img/pic1.png" alt="">
                    <img class="footer-i-img2 dn" src="./img/pic2.png" alt="">
                    <span>业务管理</span>
                </a>
            </div>
            <div class="footer-i">
                <a href="javascript:;" data-url="/cloud/board/enterprise">
                    <img class="footer-i-img1 dn" src="./img/pic3.png" alt="">
                    <img class="footer-i-img2" src="./img/pic4.png" alt="">
                    <span>企业看板</span>
                </a>
            </div>
            <div class="footer-i">
                <a href="javascript:;" data-url="/cloud/analyse">
                    <img class="footer-i-img1 dn" src="./img/pic5.png" alt="">
                    <img class="footer-i-img2" src="./img/pic6.png" alt="">
                    <span>数据分析</span>
                </a>
            </div>
            <div class="footer-i">
                <a href="javascript:;">
                    <img class="footer-i-img1 dn" src="./img/pic7.png" alt="">
                    <img class="footer-i-img2" src="./img/pic8.png" alt="">
                    <span>智能硬件</span>
                </a>
            </div>
            <div class="footer-i">
                <a href="javascript:;">
                    <img class="footer-i-img1 dn" src="./img/pic9.png" alt="">
                    <img class="footer-i-img2" src="./img/pic10.png" alt="">
                    <span>我的</span>
                </a>
            </div>
        </div>
    </div>
    <script>
        $('.footer-i').click(function() {
            $(this).addClass('footer-i-active');
            $(this).siblings().removeClass('footer-i-active');
            $(this).find('.footer-i-img1').removeClass('dn');
            $(this).find('.footer-i-img2').addClass('dn');
            $(this).siblings().find('.footer-i-img1').addClass('dn');
            $(this).siblings().find('.footer-i-img2').removeClass('dn');
        })
    </script>

</body>

</html>